/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TabBarIOS,
  StatusBarIOS,
} = React;
var FamilyTab = require('./tabs/Family');
var Family = React.createClass({
  getInitialState() {
    return {
      selectedTab : 'Family'
    }
  },
  chageTab(tabName){
    StatusBarIOS.setStyle(tabName==='Family'? 1 : 0);
    this.setState({
      selectedTab: tabName
    });
  },
  render: function() {
    return (
     <TabBarIOS>
      <TabBarIOS.Item
        title="Family"
        icon={ require('image!facemash')}
        onPress={ ()=> this.chageTab('Family')}
        selected={ this.state.selectedTab === 'Family'}>
        
        <FamilyTab />
      </TabBarIOS.Item>
      <TabBarIOS.Item
        title="Messages"
        icon={ require('image!messages')}
        onPress={ () => this.chageTab('Messages')}
        selected={ this.state.selectedTab === 'Messages'}>
        <View style={styles.pageView}>
          <Text>Messages</Text>
        </View>
      </TabBarIOS.Item>
      <TabBarIOS.Item
        title="Settings"
        icon={ require('image!settings')}
        onPress={() => this.chageTab('Settings')}
        selected={ this.state.selectedTab === 'Settings'}>
        <View style={styles.pageView}>
          <Text>Settings</Text>
        </View>
      </TabBarIOS.Item>
    </TabBarIOS>
    );
  }
});

var styles = StyleSheet.create({
  pageView:{
    backgroundColor: '#FFF',
    flex : 1,
    marginTop: 20,
  }
});

AppRegistry.registerComponent('Family', () => Family);
